<template>
  <div>

    <div v-show="chartShow" class="chart" id="chartUsageRank"></div>

    <div v-show="!chartShow" class="warn">本区域暂无历史电费统计</div>
  </div>

</template>

<script>
import * as echarts from "echarts";
import { config } from "./config";

export default {
  name: "chart-usage-rank",


  mounted: function() {


    this.getTopN().then(res => {
      let x = []
      let y = []
      res.forEach(ele => {
        y.push(parseFloat(ele['fee']).toFixed(1))
        x.push(ele['building_name'] + ele['roomid'])
      })


      let ec = echarts.init(document.getElementById("chartUsageRank"), null, { renderer: "svg" });
      ec.setOption(this.getChartOption(x, y));
    })



  },

  methods: {
    getTopN: function() {
      return new Promise(resolve => {
        this.$api.topN().then(res => {
          resolve(res.data.data.top)
        })
      })

    },

    getChartOption: function(xlist, ylist) {
      // let color = '#e5cb25'
      return {
        color: config.chartItemColor,

        // color: ,

        xAxis: {
          type: "category",
          data: xlist,
          axisLabel: {
            // interval: 5
            rotate: 90
          },
          axisLine: {
            lineStyle: {
              color: config.chartLabelColor
            }
          }
        },
        yAxis: {
          type: "value",
          position: "right",
          axisLine: {
            lineStyle: {
              color: config.chartLabelColor
            }
          },
          splitLine: {
            show: false

          }
        },
        tooltip: {
          trigger: "item",
          showContent: true,
          // axisPointer: {
          //   // lineStyle: {
          //   //   color: config.chartItemColor
          //   // }
          // }

        },
        grid: {
          x: 30,
          y: 30,
          x2: 60,
          y2: 130,
          borderWidth: 10
        },
        series: [
          {
            data: ylist,
            type: "bar"
          }
        ]
      };


    }


  },

  data() {
    return {
      chartShow: true,  // 表格是否有效

    };
  }

};
</script>

<style scoped>
.chart {
  width: 100%;
  height: 600px;
  overflow: visible;
}


#range-selector {
  position: absolute;
  top: 0;
  left: 0;
}
</style>